<template>
	<div class="m-view-child-table-column">
		<template v-if="!expand">
			<tr
				v-for="(item, index) in fewData"
				:key="index"
				class="child-table__row"
			>
				<td
					v-for="(headItem, i) in head"
					:key="i"
					:style="{ 'width': `${headItem.width - 1}px`, 'text-align': headItem.align }"
					:class="{ 'td-flex-1': !headItem.width }"
				>
					<div
						v-if="headItem.identity === 'relationForm'"
						class="cell"
					>
						<el-link
							:underline="false"
							type="primary"
							@click.native="
								toDetail(headItem, item[`${headItem.model}_id`])
							"
						>
							{{item[headItem.model]}}
						</el-link>
					</div>
					<div
						v-else-if="
							headItem.identity === 'numInput' || headItem.identity === 'calculate'
						"
						class="cell"
					>
						<McNumber
							v-model="item[headItem.model]"
							:thousands="headItem.thousands"
							:precision="headItem.precision"
						/>
					</div>
					<div
						v-else
						class="cell"
					>
						{{item[headItem.model]}}
					</div>
				</td>
			</tr>
		</template>
		<template v-if="expand">
			<tr
				v-for="(item, index) in data"
				:key="index"
				class="child-table__row"
			>
				<td
					v-for="(headItem, i) in head"
					:key="i"
					:style="{ 'width': `${headItem.width - 1}px`, 'text-align': headItem.align }"
					:class="{ 'td-flex-1': !headItem.width }"
				>
					<div
						v-if="headItem.identity === 'relationForm'"
						class="cell"
					>
						<el-link
							:underline="false"
							type="primary"
							@click.native="
								toDetail(headItem, item[`${headItem.model}_id`])
							"
						>
							{{item[headItem.model]}}
						</el-link>
					</div>
					<div
						v-else-if="
							headItem.identity === 'numInput' || headItem.identity === 'calculate'
						"
						class="cell"
					>
						<McNumber
							v-model="item[headItem.model]"
							:thousands="headItem.thousands"
							:precision="headItem.precision"
						/>
					</div>
					<div
						v-else
						class="cell"
					>
						{{item[headItem.model]}}
					</div>
				</td>
			</tr>
		</template>
		<div
			v-if="data.length > defaultNumber"
			class="expand-more-btn"
		>
			<el-button
				v-if="expand"
				type="text"
				@click="toggleExpand"
			>
				隐藏部分
			</el-button>
			<el-button
				v-if="!expand"
				type="text"
				@click="toggleExpand"
			>
				加载更多
			</el-button>
		</div>
	</div>
</template>

<script>
export default {
	name:'ChildTableColumn',
	props:{
		data:{
			type:Array,
			default:() => [],
		},
		head:{
			type:Array,
			default:() => [],
		},
		defaultNumber:{
			type:Number,
			default:3,
		},
		rowEdit:{
			type:Boolean,
			default:false,
		},
		expand:{
			type:Boolean,
			default:false,
		},
	},
	data(){
		return {};
	},
	computed:{
		fewData(){
			if(!this.data) return [];
			return this.data.slice(0, this.defaultNumber);
		},
	},
	methods:{
		toggleExpand(){
			this.$emit('toggle-expand');
		},
		toDetail(item, id){
			this.$emit('to-detail', item, id);
		},
	},
};
</script>